<template>
  <!-- props: href 跳转的链接 -->
  <!-- props: route对象 -->
  <!-- props: navigate导航函数 -->
  <!-- props: isActive 是否当前处于活跃的状态 -->
  <!-- props: isExactActive 是否当前处于精确的活跃状态 -->
  <router-link to="/home" v-slot="{ href, route, navigate, isActive, isExactActive }" custom>
    Home
    <button @click="navigate">{{ href }}</button>
    <button>{{ route.name }}</button>
    <button :class="{ active: isActive }">{{ isActive }}</button>
    <button :class="{ active: isActive }">{{ isExactActive }}</button>
  </router-link>
  <router-link to="/about">About</router-link>
  <router-link to="/post/post123">Post</router-link>
  <router-link to="/home/category">Category</router-link>
  <button @click="jumpToProfile">Push Profile</button>
  <router-link to="/dynamicAdd">
    <button>DynamicAdd</button>
  </router-link>
  <router-link to="/dynamicAdd/dynamicAdd2">
    <button>DynamicAdd2</button>
  </router-link>

  <router-view v-slot="{ Component }">
    <transition name="slim">
      <keep-alive>
        <component :is="Component"></component>
      </keep-alive>
    </transition>
  </router-view>
</template>

<script>
export default {
  methods: {
    jumpToProfile() {
      // this.$router.replace('/profile')
      this.$router.push({
        path: '/profile',
        query: {
          name: 'slim',
          age: 18
        }
      })
    }
  }
}
</script>

<style scoped>
a {
  margin: 10px;
}
div {
  margin: 10px;
}
.active {
  color: blue;
}
.slim-enter-from,
.slim-leave-to {
  opacity: 0;
}

.slim-enter-active,
.slim-leave-active {
  transition: opacity 1s ease;
}
</style>
